<template>
  <el-form-item :label="label" :prop="prop" :label-width="labelWidth">
    <el-input-number
      v-model="newv"
      :placeholder="placeholder"
      :max="max"
      :min="min"
      :precision="precision"
      ref="elnumber"
      :step="step"
      controls-position="right"
      :disabled="disabled"
      @focus="focus"
      @blur="blur"

    ></el-input-number>
  </el-form-item>
</template>
<script setup>
import { computed, ref, watch } from "vue";

const props = defineProps({
  modelValue: [Number],
  label: {
    type: String,
    default: "",
  },
  isFloat: {
    type: Boolean,
    default: false,
  },
  max: {
    type: Number,
    default: Number.MAX_VALUE,
  },
  min: {
    type: Number,
    default: 0,
  },
  prop: {
    type: String,
    default: "",
  },
  placeholder: {
    type: String,
    default: "请输入",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  floatNumber: {
    type: Number,
    default: 2,
  },
  labelWidth:{
    type: String,
    default: "180"
  }
});
var precision = ref("6");
const emit = defineEmits(["update:modelValue"]);

const newv = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});
const step = computed(() => {
  return props.isFloat ? 0.1 : 1;
});
watch(
  () => props.modelValue,
  (val) => {
    if (val && val > 0) {
      if (props.isFloat) {
        if (val.toString().split(".")[1]) {
          precision = val.toString().split(".")[1].length;
        } else {
          precision = 0;
        }
      } else {
        precision = 0;
      }
    } else {
      precision = 0;
    }
  },
  { deep: true, immediate: true }
);
const focus = () => {
  precision = isFloat ? floatNumber : 0;
};
const blur = () => {
  if (isFloat) {
    if (props.modelValue.toString().split(".")[1]) {
      precision = props.modelValue.toString().split(".")[1].length;
    } else {
      precision = 0;
    }
  } else {
    precision = 0;
  }
};
</script>
